<template>
	<view class="container">
		<!-- 顶部轮播图 -->
		<swiper class="banner" circular autoplay>
			<swiper-item v-for="(item,index) in bannerList" :key="index">
				<image :src="item" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		
		<!-- 业务范围 -->
		<view class="section business">
			<view class="title">
				<view class="main">主营业务</view>
				<view class="sub">BUSINESS</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in businessList" :key="index">
					<view class="icon-box">
						<u-icon :name="item.icon" color="#018d71" size="52"></u-icon>
					</view>
					<view class="name">{{item.name}}</view>
					<view class="desc">{{item.desc}}</view>
				</view>
			</view>
		</view>
		
		<!-- 联系我们 -->
		<view class="section contact">
			<view class="title">
				<view class="main">联系我们</view>
				<view class="sub">CONTACT US</view>
			</view>
			<view class="list">
				<!-- 公司电话 -->
				<view class="item company">
					<view class="header">
						<u-icon name="home" color="#018d71" size="32"></u-icon>
						<view class="name">公司信息</view>
					</view>
					<view class="info">
						<view class="row">
							<u-icon name="phone" color="#666" size="28"></u-icon>
							<view class="text">{{company.phone}}</view>
						</view>
						<view class="row">
							<u-icon name="map" color="#666" size="28"></u-icon>
							<view class="text">{{company.address}}</view>
						</view>
					</view>
				</view>
				
				<!-- 联系人列表 -->
				<view class="item contact-person" v-for="(item,index) in contactList" :key="index">
					<view class="header">
						<u-icon name="account" color="#018d71" size="32"></u-icon>
						<view class="name">{{item.name}}</view>
						<view class="position">{{item.position}}</view>
					</view>
					<view class="info">
						<view class="row">
							<u-icon name="phone" color="#666" size="28"></u-icon>
							<view class="text">{{item.phone}}</view>
						</view>
						<view class="row" @tap="showQrcode(index)">
							<u-icon name="weixin-fill" color="#666" size="28"></u-icon>
							<view class="text">{{item.weixin}}</view>
							<view class="tag">点击查看二维码</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部版权 -->
		<view class="footer">
			<view>Copyright © 2025-2030</view>
			<view>开发者 kkmystery 版权所有 微信: kk42024</view>
			<!-- <view>粤ICP备xxxxxxxx号</view> -->
		</view>
		
		<!-- 微信二维码弹窗 -->
		<u-popup v-model="showQrcodePopup" mode="center" :round="10" @close="showQrcodePopup = false">
			<view class="qrcode-box">
				<view class="header">
					<view class="title">{{currentContact ? currentContact.name + ' - ' + currentContact.position : ''}}</view>
					<view class="close" @tap="showQrcodePopup = false">×</view>
				</view>
				<view class="content">
					<image 
						:src="currentContact ? currentContact.qrcode : ''" 
						mode="aspectFit" 
						@longpress="saveQrcode"
					></image>
					<view class="tips">长按保存二维码</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			company: {},
			bannerList: [],
			businessList: {},
			contactList: [],
			showQrcodePopup: false,
			currentContactIndex: -1
		}
	},
	computed: {
		currentContact() {
			if(this.currentContactIndex < 0) return null
			return this.contactList[this.currentContactIndex] || null
		}
	},
	methods: {
		showQrcode(index) {
			this.currentContactIndex = index
			this.showQrcodePopup = true
		},
		saveQrcode() {
			const contact = this.currentContact
			if(!contact || !contact.qrcode) return
			
			uni.showModal({
				title: '提示',
				content: '是否保存二维码到相册？',
				success: (res) => {
					if(res.confirm) {
						// #ifdef MP-WEIXIN
						uni.downloadFile({
							url: contact.qrcode,
							success: (res) => {
								if (res.statusCode === 200) {
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: () => {
											uni.showToast({
												title: '保存成功',
												icon: 'success'
											})
										},
										fail: (err) => {
											this.handleSaveError(err)
										}
									})
								}
							},
							fail: () => {
								uni.showToast({
									title: '图片下载失败',
									icon: 'none'
								})
							}
						})
						// #endif
						
						// #ifndef MP-WEIXIN
						uni.saveImageToPhotosAlbum({
							filePath: contact.qrcode,
							success: () => {
								uni.showToast({
									title: '保存成功',
									icon: 'success'
								})
							},
							fail: (err) => {
								this.handleSaveError(err)
							}
						})
						// #endif
					}
				}
			})
		},
		handleSaveError(err) {
			if(err.errMsg.indexOf('auth deny') !== -1) {
				uni.showModal({
					title: '提示',
					content: '请在系统设置中允许访问相册',
					showCancel: false
				})
			} else {
				uni.showToast({
					title: '保存失败',
					icon: 'none'
				})
			}
		}
	},
	onLoad() {
		vk.callFunction({
			url: 'client/system/pub/config',	
			success: (data) => {
				if(data.item) {
					this.bannerList = data.item.banner;
					this.businessList = data.item.business;
					this.contactList = data.item.contact;
					this.company = data.item.company;
				}
			}
		})
	},
	// 分享设置 
	onShareAppMessage() {
		return {
			title: '鑫汇园包装材料',
			path: '/pages/index/index',
			imageUrl: '/static/share.png' // 分享图片,建议尺寸 5:4
		}
	},
	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: '鑫汇园包装材料',
			imageUrl: '/static/share.png'
		}
	},
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f8f8f8;
	padding-bottom: 40rpx;
	
	.banner {
		height: 350rpx;
		
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.section {
		margin: 30rpx 20rpx;
		padding: 30rpx;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 24rpx rgba(0,0,0,0.05);
		
		.title {
			text-align: center;
			margin-bottom: 40rpx;
			
			.main {
				font-size: 36rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 8rpx;
			}
			
			.sub {
				font-size: 24rpx;
				color: #999;
				letter-spacing: 2rpx;
			}
		}
	}
	
	.business {
		.list {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 30rpx;
			
			.item {
				background: #fff;
				border-radius: 12rpx;
				padding: 30rpx;
				text-align: center;
				box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
				transition: all 0.2s;
				
				&:active {
					transform: scale(0.98);
				}
				
				.icon-box {
					width: 120rpx;
					height: 120rpx;
					margin: 0 auto 24rpx;
					background: linear-gradient(135deg, rgba(1,141,113,0.15) 0%, rgba(1,141,113,0.05) 100%);
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					
					&::after {
						content: '';
						position: absolute;
						width: 100%;
						height: 100%;
						border-radius: 50%;
						border: 2rpx solid rgba(1,141,113,0.2);
						animation: pulse 2s infinite;
					}
				}
				
				.name {
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
					margin-bottom: 12rpx;
				}
				
				.desc {
					font-size: 26rpx;
					color: #666;
					line-height: 1.4;
				}
			}
		}
	}
	
	.contact {
		.list {
			.item {
				background: #f8f8f8;
				border-radius: 12rpx;
				padding: 24rpx;
				margin-bottom: 20rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.header {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					padding-bottom: 16rpx;
					border-bottom: 2rpx solid #eee;
					
					.name {
						font-size: 30rpx;
						color: #333;
						font-weight: 500;
						margin: 0 16rpx;
					}
					
					.position {
						font-size: 24rpx;
						color: #018d71;
						background: rgba(1,141,113,0.1);
						padding: 4rpx 12rpx;
						border-radius: 8rpx;
					}
				}
				
				.info {
					.row {
						display: flex;
						align-items: center;
						margin-bottom: 16rpx;
						
						&:last-child {
							margin-bottom: 0;
						}
						
						&:active {
							opacity: 0.7;
						}
						
						.text {
							font-size: 28rpx;
							color: #333;
							margin: 0 16rpx;
							flex: 1;
						}
						
						.tag {
							font-size: 24rpx;
							color: #018d71;
						}
					}
				}
				
				&.company {
					background: #fff;
					border: 2rpx solid #eee;
				}
				
				&.contact-person {
					transition: all 0.2s;
					
					&:active {
						transform: scale(0.98);
					}
				}
			}
		}
	}
	
	.footer {
		text-align: center;
		padding: 30rpx;
		
		view {
			font-size: 24rpx;
			color: #999;
			line-height: 1.8;
		}
	}
	
	.qrcode-box {
		padding: 30rpx;
		
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;
			
			.title {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
			
			.close {
				font-size: 40rpx;
				color: #999;
				padding: 10rpx;
				
				&:active {
					opacity: 0.7;
				}
			}
		}
		
		.content {
			text-align: center;
			
			image {
				width: 400rpx;
				height: 400rpx;
				margin-bottom: 20rpx;
			}
			
			.tips {
				font-size: 26rpx;
				color: #999;
			}
		}
	}
}

@keyframes pulse {
	0% {
		transform: scale(1);
		opacity: 0.6;
	}
	50% {
		transform: scale(1.1);
		opacity: 0.3;
	}
	100% {
		transform: scale(1);
		opacity: 0.6;
	}
}
</style>